<template>
  <div>
    <el-card>
      <div class="change-password-box">
        <div class="header">
          <span>修改密码</span>
        </div>
        <el-form :model="formData" ref="changePasswordForm" label-width="100px" class="change-password-form">
          <el-form-item label="当前密码：" prop="currentPassword"
            :rules="[{ required: true, message: '请输入当前密码', trigger: 'blur' }]">
            <el-input v-model="formData.currentPassword" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassword" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' }]">
            <el-input v-model="formData.newPassword" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="confirmPassword"
            :rules="[{ required: true, message: '请确认新密码', trigger: 'blur' }, { validator: validateConfirmPassword, trigger: 'blur' }]">
            <el-input v-model="formData.confirmPassword" type="password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import userApi from '../../api/user';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const username = sessionStorage.getItem('username') //日志需要

const changePasswordForm = ref(null)
const formData = ref({
  username: username,
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const validateConfirmPassword = (rule, value, callback) => {
  if (value !== formData.value.newPassword) {
    callback(new Error('新密码和确认密码不一致'));
  } else {
    callback();
  }
};


const submitForm = () => {
  changePasswordForm.value.validate((valid) => {
    if (valid) {
      userApi.changePassword(formData.value)
        .then(response => {
          if (response.data.success) {
            ElMessage.success('密码修改成功');
            // 清除缓存
            sessionStorage.clear()
            localStorage.clear()
            router.push('/login')
          }else{
            ElMessage.error(response.data.message || '密码修改失败');
          }
        })
        .catch(error => {
          ElMessage.error(error.message || '密码修改失败');
        });
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};

const resetForm = () => {
  formData.value.currentPassword = '';
  formData.value.newPassword = '';
  formData.value.confirmPassword = '';
};
</script>

<style scoped>
.change-password-box {
  width: 400px;
  margin: 10px 0 30px 10px;
  padding: 30px;
  border-radius: 20px;
  background: rgb(255 255 255);
  box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 40px 0px;
}

.header {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
</style>
